<!--
 * @Description: 岗位管理
 * @Author: wangwangwang
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-07-30 14:10:37
-->
<template>
  <div class="pages_content table dictionary-container">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <el-form ref="form" :inline="true" :model="form">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入" @keyup.enter.native="initData()"></el-input>
                </el-form-item>
                <el-form-item label="编码" prop="code">
                  <el-input v-model="form.code" placeholder="请输入" @keyup.enter.native="initData()"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="initData()">查 询</el-button>
                  <el-button size="medium" class="bottom_all_two" @click="resetData()">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0;" @click="add()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                添加
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='RIYONG'))!==-1" size="small" class="bottom_three" @click="updateType(1)">
                <i class="icon iconfont iconicon_button_startuse" style="font-size: 12px;"></i>
                启用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JINYONG'))!==-1" size="small" class="bottom_four" @click="updateType(2)">
                <i class="el-icon-remove-outline el-icon--left" style="transform: rotate(-45deg);"></i>
                禁用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHANCHU'))!==-1" size="small" class="bottom_two" @click="updateType(3)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
                删除
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='FENPEIZZ'))!==-1" size="small" class="botton_five" @click="open()">分配组织</el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='ZJZHIWU'))!==-1" size="small" class="botton_five" @click="getgw()">职务职级</el-button>
            </div>
            <div>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='BAOCUNPXH'))!==-1" :underline="false" @click="updateSortNum()">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_sort1"></i>
                </span>
                保存排序号
              </el-link>
              <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
                <el-link :underline="false">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_filtrate"></i>
                  </span>
                  筛选
                </el-link>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in tableColumns" :key="index">
                    <el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="$Download(DownloadURL, form);">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_export1"></i>
                </span>
                导出
              </el-link>
            </div>
          </div>
          <div class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column align="center" type="selection"></el-table-column>
              <template v-for="(item, index) in tableColumns">
                <el-table-column v-if="item.status" :key="index" :label="item.label" align="center" :fixed=" item.label =='操作'?'right':false">
                  <template slot-scope="scope">
                    <el-button v-if="item.label == '组织'&&ButtonList.findIndex(res=>(res.buttonValue=='CHAKANZZ'))!==-1" class="bottom_one" size="mini" @click="showtreeDate(scope.row),time=new Date().getTime()">查看组织</el-button>
                    <span v-if="scope.row.enable == 0 && item.label == '状态'" style="color:#969799;">禁用</span>
                    <span v-if="scope.row.enable == 1 && item.label == '状态'" style="color:#00A754;">启用</span>
                    <el-button v-if="item.label == '操作'&&ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="update(scope.row)">
                      <i class="icon iconfont iconicon_button_modification" style="font-size: 12px;"></i>
                      修改
                    </el-button>
                    <div v-if="item.label == '排序号'">
                      <el-input v-model="scope.row.sortNum"></el-input>
                    </div>
                    <span v-if="item.label !== '排序号' && item.label !== '操作' && item.label !== '状态' && item.label !== '组织'">{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :page-size="pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" :current-page.sync="page" @current-change="initData()" @size-change="sizeChange"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="initData()">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" :before-close="resefrom">
      <span slot="title" class="dialog-title">{{ dialogtitle }}</span>
      <el-form ref="dialogForm" style="padding: 20px" :rules="rules" :model="dialogForm" label-width="80px">
        <el-form-item prop="code">
          <span slot="label" style="width: 90px;color:  #FF0000 ;">编码</span>
          <el-input v-model="dialogForm.code" placeholder="请输入" @input="changecode"></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <span slot="label" style="width: 90px;color:  #FF0000 ;">名称</span>
          <el-input v-model="dialogForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="系数" prop="coefficient">
          <el-input v-model="dialogForm.coefficient" type="Number" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="sortNum">
          <el-input v-model="dialogForm.sortNum" type="Number" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="typeId">
          <el-select v-model="dialogForm.typeId" placeholder="请选择" style="width:100%">
            <el-option v-for="(item, index) in options" :key="index" :label="item.itemName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="enable">
          <el-radio-group v-model="dialogForm.enable">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resefrom">取 消</el-button>
        <el-button class="bottom_all" @click="sureSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!--分配组织-->
    <el-dialog v-dialogDrag :visible.sync="distribution" width="1072px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">分配组织</span>
      <div class="dialoginfo distribution" style="padding: 0;">
        <div class="dialoginfo-title-bg">
          <div class="dialoginfo-title">
            <div :class="distributionModule == 0 ? 'active' : 'none'" @click="distribuModule(0)">
              <div>
                岗位
                <i class="iconfont iconicon_right"></i>
                组织
              </div>
            </div>
            <div :class="distributionModule == 1 ? 'active' : 'none'" @click="distribuModule(1)">
              <div>
                组织
                <i class="iconfont iconicon_right"></i>
                岗位
              </div>
            </div>
          </div>
        </div>
        <div v-if="distributionModule == 0" class="dialoginfo-info">
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">岗位</div>
            <div class="dialoginfo-info-info">
              <el-radio-group v-model="sourceId1">
                <template v-for="(item, index) in OSarr">
                  <div :key="item.id" class="user" @click="changaiiId(item, index)">
                    <i class="icon iconfont icontree_icon_jobs"></i>
                    <el-radio :label="item.id"> {{ item.name }}</el-radio>
                  </div>
                </template>
              </el-radio-group>
            </div>
          </div>
          <div class="dialoginfo-info-center"></div>
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">已选组织</div>
            <div class="dialoginfo-info-info">
              <el-tree ref="orangeotree" node-key="id" show-checkbox default-expand-all :expand-on-click-node="false" class="tree-line" check-strictly :indent="0" :data="orangeoptions" :props="defaultProps" @check="changeorg">
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <i :class="data.icon" :style="'color:' + data.color"></i>
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
        <div v-if="distributionModule == 1" class="dialoginfo-info">
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">组织</div>
            <div class="dialoginfo-info-info">
              <el-radio-group v-model="sourceId2">
                <el-tree :data="orangeoptions" node-key="id" class="tree-line" :indent="0" default-expand-all :props="defaultProps" :expand-on-click-node="false">
                  <div slot-scope="{ node, data }" class="custom-tree-node" @click="changeorange(data)">
                    <i :class="data.icon" :style="'color:' + data.color"></i>
                    <el-radio :label="data.id"> {{node.label }}</el-radio>
                  </div>
                  <!-- <span slot-scope="{ node, data }" class="custom-tree-node">
                  <i :class="data.icon" :style="'color:' + data.color"></i>
                  <span>{{ node.label }}</span>
                </span> -->
                </el-tree>
              </el-radio-group>
            </div>
          </div>
          <div class="dialoginfo-info-center"></div>
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">已选岗位</div>
            <div class="dialoginfo-info-info">
              <el-checkbox-group v-model="optionIds" @change="changgeoptionIds">
                <div v-for="(item, index) in OSarr" :key="index" class="user">
                  <el-checkbox :label="item.id">
                    <i class="icon iconfont icontree_icon_jobs"></i>
                    {{ item.name }}
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="distribution = false">取 消</el-button>
        <el-button class="bottom_all" size="medium" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
    <!--职务职级-->
    <el-dialog v-dialogDrag :visible.sync="Postrank" width="1072px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">职务职级</span>
      <div class="dialoginfo distribution" style="padding: 0;">
        <div class="dialoginfo-title-bg">
          <div class="dialoginfo-title">
            <div :class="PostrankModule == 0 ? 'active' : 'none'" @click="clickrankindex(0)">
              <div>职级配置</div>
            </div>
            <div :class="PostrankModule == 1 ? 'active' : 'none'" @click="clickrankindex(1)">
              <div>快捷职级配置</div>
            </div>
          </div>
        </div>
        <!-- 职级配置 -->
        <div v-show="PostrankModule == 0" class="dialoginfo-info">
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title second-title">
              <div :class="PostrankTitle == 0 ? 'second-title-bg-none' : 'second-title-bg-active'" @click="clickPostrankTitle(0)">
                <div class="second-title-text">岗位</div>
              </div>
              <div :class="PostrankTitle == 1 ? 'second-title-bg-none' : 'second-title-bg-active'" @click="clickPostrankTitle(1)">
                <div class="second-title-text">职务</div>
              </div>
            </div>
            <div class="dialoginfo-info-info">
              <div v-if="PostrankTitle == 0">
                <el-radio-group v-model="leftkeys" @change="changgegw">
                  <div v-for="(item, index) in gw" :key="index" class="user">
                    <i class="icon iconfont icontree_icon_jobs"></i>
                    <el-radio :label="item.id">{{ item.name }}</el-radio>
                  </div>
                </el-radio-group>
              </div>
              <div v-if="PostrankTitle == 1">
                <el-radio-group v-model="leftkeys" @change="changgepo">
                  <div v-for="(item, index) in Postoptions" :key="index" class="user">
                    <i class="icon iconfont icontree_icon_team"></i>
                    <el-radio :label="item.id">{{ item.itemName }}</el-radio>
                  </div>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="dialoginfo-info-center"></div>
          <!-- 职级 -->
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">
              <div class="second-title-text">职级</div>
            </div>
            <div v-loading="loadingshow" class="dialoginfo-info-info">
              <!-- <el-radio-group v-model="rankkeys" @change="changerank">
                <div v-for="(item, index) in rankoptions" :key="index" class="user">
                  <el-radio :label="item.id">{{ item.itemName }}</el-radio>
                </div>
              </el-radio-group> -->
              <el-checkbox-group v-model="rankkeys">
                <div v-for="(item, index) in rankoptions" :key="index" class="user">
                  <el-checkbox :label="item.id" @change="changerank(item)">{{ item.itemName }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div v-show="PostrankModule == 1" class="dialoginfo-info">
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title">
              <div class="second-title-text">职级</div>
            </div>
            <div class="dialoginfo-info-info">
              <el-radio-group v-model="rankkeys" @change="changerank1">
                <div v-for="(item, index) in rankoptions" :key="index" class="user">
                  <el-radio :label="item.id">{{ item.itemName }}</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
          <div class="dialoginfo-info-center"></div>
          <div class="dialoginfo-info-div">
            <div class="dialoginfo-info-title second-title">
              <div :class="PostrankTitle == 0 ? 'second-title-bg-none' : 'second-title-bg-active'" @click="clickPostrankTitle(0)">
                <div class="second-title-text">岗位</div>
              </div>
              <div :class="PostrankTitle == 1 ? 'second-title-bg-none' : 'second-title-bg-active'" @click="clickPostrankTitle(1)">
                <div class="second-title-text">职务</div>
              </div>
            </div>
            <div class="dialoginfo-info-info">
              <div v-if="PostrankTitle == 0">
                <el-checkbox-group v-model="rightkeys" @change="changgegw1">
                  <div v-for="(item, index) in gw" :key="index" class="user">
                    <el-checkbox :label="item.id">
                      <i class="icon iconfont icontree_icon_jobs"></i>
                      {{ item.name }}
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
              <div v-if="PostrankTitle == 1">
                <el-checkbox-group v-model="rightkeys" @change="changgepo1">
                  <div v-for="(item, index) in Postoptions" :key="index" class="user">
                    <el-checkbox :label="item.id">
                      <i class="icon iconfont icontree_icon_team"></i>
                      {{ item.itemName }}
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="closePostrank()">取 消</el-button>
        <!-- <el-button class="bottom_all" size="medium" @click="submitPostrank()">确 定</el-button> -->
      </span>
    </el-dialog>
    <!--查看组织-->
    <el-dialog v-dialogDrag :visible.sync="traaDateshow" width="500px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">查看组织</span>
      <div class="traaDate-info scroll">
        <el-tree :key="time" ref="reftraaDate1" class="tree-line" :indent="0" :default-expanded-keys="expandedKeys" node-key="id" :expand-on-click-node="false" :data="traaDate1" :props="defaultProps">
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <div style="display: inline-block;width:17px;height:26px;padding:8px 3px 0 0">
              <img style="width:14px;height:14px" :src="data.imgIcon" />
            </div>
            <span :style="chenckarr.indexOf( data.id)!==-1?'color:'+bgcolor:''">{{ node.label }}</span>
          </span>
        </el-tree>
        <el-tree v-show="false" ref="reftraaDate" class="tree-line" :indent="0" :default-expanded-keys="expandedKeys" show-checkbox node-key="id" :expand-on-click-node="false" :data="traaDate" :props="defaultProps">
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="traaDateshow=false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
function Binding(status, organizationId, stationsId) {
  this.status = 1;
  this.organizationId = organizationId;
  this.stationsId = stationsId;
}
import styles from "@/app.scss";
import { getDicType, getIdList } from "@/api/common";
import {
  queryPage,
  saveOrUpdate,
  updateOrDelete,
  updateSortnum,
  ossaveOrUpdate,
  rssaveOrUpdate,
  rpsaveOrUpdate,
  getrplist,
  Download,
} from "@/api/basedata/jobs.js";
import { queryPage as organgequeryPage } from "@/api/basedata/organization.js";
import breaDcrumb from "@/components/breadcrumb";
import { mapGetters } from "vuex";
import { formatTreeData } from "@/utils/utils";
import { codeReg, sortReg } from "@/common/RegExp.js";
export default {
  components: {
    breaDcrumb,
  },
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (sortReg(value)) {
        callback();
      } else {
        callback(new Error("请输正整数序号!"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (sortReg(value)) {
        callback();
      } else {
        callback(new Error("请输正整数系数!"));
      }
    };
    return {
      DownloadURL: Download,
      oldrankkeys: [],
      rightkeys: [],
      loadingshow: false,
      time: '',
      expandedKeys: [],
      bgcolor: styles.bg_color,
      chenckarr: [],
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }],
        coefficient: [
          { required: true, message: "请输入系数", trigger: "blur" },
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
        typeId: [{ required: true, message: "请选择分类", trigger: "change" }],
        sortNum: [{ required: true, message: "请输入排序号", trigger: "blur" },
        {
          validator: validatePass1,
          trigger: "blur",
        },
        ],
      },
      /*职务职级*/
      leftkeys: '',
      gwcheck: [],
      opcheck: [],
      PostrankModule: 0,
      PostrankTitle: 0,
      Postrank: false,
      rankoptions: [],
      Postoptions: [],
      gw: [],
      gwindex: null,
      poindex: null,
      rankindex: null,
      rankkeys: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      /*岗位*/
      allindex: null,
      optionIds: [],
      optionId: null,
      /*村塾字段*/
      OSarr: [],
      /*组织*/
      orangeoptions: [],
      orid: null,
      /*分配组织*/
      distributionModule: 0,
      oldarr: [],
      totalarr: [],
      /*分配用户弹窗*/
      distribution: false,
      /*添加修改弹窗*/
      dialogVisible: false,
      loading: false,
      dialogtitle: "",
      /*判断收起展开*/
      showCardNav: true,
      /*列表展示*/
      tableColumns: [
        { label: "编码", width: "120", prop: "code", status: true },
        { label: "名称", width: "120", prop: "name", status: true },
        { label: "分类", width: "120", prop: "typeName", status: true },
        { label: "组织", width: "120", prop: "organization", status: true },
        { label: "职级", width: "120", prop: "rankName", status: true },
        { label: "系数", width: "120", prop: "coefficient", status: true },
        { label: "排序号", width: "120", prop: "sortNum", status: true },
        { label: "状态", width: "120", prop: "enable", status: true },
        { label: "操作", width: "120", prop: "", status: true },
      ],
      /*列表选中的数据集*/
      SelectionTableData: [],
      tableData: [],
      total: 0,
      dialogTable: [],
      page: 1,
      pageSize: 10,
      dialogForm: {
        code: "",
        name: "",
        coefficient: "",
        sortNum: "",
        enable: 1,
        typeId: "",
        typeName: "",
        typeValue: "",
      },
      form: {
        code: "",
        name: "",
      },
      traaDateshow: false,
      traaDate: [],
      traaDate1: [],
      options: [],
      subOSarr: [],
      ButtonList: [],
      sourceId1: '',
      sourceId2: ''
    };
  },
  created() {
    this.ButtonList = this.$ButtonList()
    let params = {
      page: 1,
      pageSize: 10000000,
    };
    organgequeryPage({ ...params, showEnable: 0 }).then((res) => {
      if (res.code === 1001) {
        const { data } = res.data;
        this.traaDate = formatTreeData(
          data,
          "id",
          "parentId",
          "children",
          "parent_id"
        );

      }
    });
  },
  methods: {
    changecode() {
      this.dialogForm.code = codeReg(this.dialogForm.code);
    },
    showtreeDate(data) {
      this.traaDateshow = true;
      getIdList({
        sourceId: data.id,
        type: "stations_organization",
      }).then((ress) => {
        if (ress.data) {
          this.chenckarr = ress.data.targetIds;
          this.$refs.reftraaDate.setCheckedKeys(ress.data.targetIds);
          this.expandedKeys = ress.data.targetIds;
          this.$nextTick(() => {
            this.traaDate1 = formatTreeData(
              this.$refs.reftraaDate.getCheckedNodes(false, true),
              "id",
              "parentId",
              "children",
              "parent_id"
            );
          })
        }
      });
    },
    /*职级职务快捷配置切换*/
    clickrankindex(a) {
      this.loadingshow = false
      this.leftkeys = null;
      this.rankkeys = null;
      this.PostrankModule = a
      this.PostrankTitle = 0;
    },
    /**岗关职级配置*/
    closePostrank() {
      this.Postrank = false;
      this.loadingshow = false
      this.leftkeys = null;
      this.rankkeys = null;
      this.PostrankModule = 0;
      this.PostrankTitle = 0;
      this.initData()
    },
    /**岗位与职务切换*/
    clickPostrankTitle(a) {
      this.PostrankTitle = a;
      this.gwindex = null;
      this.poindex = null;
      this.rankkeys = "";
      this.leftkeys = ''
      this.rightkeys = []
      this.oldrankkeys = []
    },
    /**职级配置*/
    changgegw() {
      getrplist({
        sourceId: this.leftkeys,
        type: "stations_rank",
      }).then((res) => {
        if (res.data.list.length !== 0) {
          // this.rankkeys = res.data.list[0].targetId
          this.rankkeys = res.data.list.map(res => (res.targetId))
          this.oldrankkeys = JSON.parse(JSON.stringify(res.data.list))
        } else {
          this.rankkeys = []
          this.oldrankkeys = []
        }
      });
    },
    changgepo() {
      getrplist({
        sourceId: this.leftkeys,
        type: "post_rank",
      }).then((res) => {
        if (res.data.list.length !== 0) {
          // this.rankkeys = res.data.list[0].targetId
          this.rankkeys = res.data.list.map(res => (res.targetId))
          this.oldrankkeys = JSON.parse(JSON.stringify(res.data.list))
        } else {
          this.rankkeys = []
          this.oldrankkeys = []
        }
      });
    },
    changerank(e) {
      let arr = []
      this.loadingshow = true;
      if (this.oldrankkeys.length !== 0) {
        let item = this.oldrankkeys.find(res => (res.targetId == e.id))
        if (this.oldrankkeys.some(res => (res.targetId == e.id))) {
          arr.push(
            {
              id: item.id,
              status: 0
            }
          )
        } else {
          if (this.PostrankTitle == 0) {
            arr.push({
              stationsId: this.leftkeys,
              rankId: e.id,
              status: 1
            })
          } else {
            arr.push({
              postId: this.leftkeys,
              rankId: e.id,
              status: 1
            })
          }
        }

      }
      if (this.PostrankTitle == 0) {
        arr.push({
          stationsId: this.leftkeys,
          rankId: this.rankkeys[0],
          status: 1
        })
        rssaveOrUpdate(arr).then((res) => {
          if (res.code == 1001) {
            this.loadingshow = false
          }
        });
        return
      }
      arr.push({
        postId: this.leftkeys,
        rankId: this.rankkeys[0],
        status: 1
      })
      rpsaveOrUpdate(arr).then((res) => {
        if (res.code == 1001) {
          this.loadingshow = false
        }
      });
    },
    /*快捷配置*/
    changerank1() {
      if (this.PostrankTitle == 0) {
        getrplist({
          sourceId: this.rankkeys,
          type: "rank_stations",
        }).then((res) => {
          if (res.data.list.length !== 0) {
            this.rightkeys = res.data.list.map(res => (res.targetId))
            this.oldrankkeys = res.data.list
          } else {
            this.rightkeys = []
            this.oldrankkeys = []
          }
          // this.rightkeys = res.data.targetIds
        });
        return
      }
      getrplist({
        sourceId: this.rankkeys,
        type: "rank_post",
      }).then((res) => {
        if (res.data.list.length !== 0) {
          this.rightkeys = res.data.list.map(res => (res.targetId))
          this.oldrankkeys = res.data.list
        } else {
          this.rightkeys = []
          this.oldrankkeys = []
        }
        //this.rightkeys = res.data.targetIds
      });

    },
    changgegw1() {
      this.loadingshow = true
      let allHasData = this.rightkeys.filter((item) => (
        this.oldrankkeys.some((items) => (item == items.targetId))
      ))
      let deleteData = this.oldrankkeys.filter((item) => (
        !allHasData.some((items) => (item.targetId == items))
      ))
      let addData = this.rightkeys.filter((item) => (
        !allHasData.some((items) => (item == items))
      ))
      deleteData = deleteData.map(res => ({ id: res.id, status: 0 }))
      addData = addData.map(res => ({ rankId: this.rankkeys, stationsId: res, status: 1 }))
      let arr = [...deleteData, ...addData]
      rssaveOrUpdate(arr).then((res) => {
        if (res.code == 1001) {
          this.loadingshow = false
        }
      });

    },
    changgepo1() {
      this.loadingshow = true
      let allHasData = this.rightkeys.filter((item) => (
        this.oldrankkeys.some((items) => (item == items.targetId))
      ))
      let deleteData = this.oldrankkeys.filter((item) => (
        !allHasData.some((items) => (item.targetId == items))
      ))
      let addData = this.rightkeys.filter((item) => (
        !allHasData.some((items) => (item == items))
      ))
      deleteData = deleteData.map(res => ({ id: res.id, status: 0 }))
      addData = addData.map(res => ({ postId: this.rankkeys, rankId: res, status: 1 }))
      let arr = [...deleteData, ...addData]
      rpsaveOrUpdate(arr).then((res) => {
        if (res.code == 1001) {
          this.loadingshow = false
        }
      });
    },
    /*获取岗位，职务，职级*/
    getgw() {
      let _this = this;
      this.Postrank = true;
      let params = {
        page: 1,
        pageSize: 10000,
      };
      _this.rankoptions = [];
      _this.gw = [];
      _this.Postoptions = [];
      /*岗位*/
      queryPage({ ...params, enable: 1 }).then((res) => {
        _this.gw = res.data.data
      });
      /*职务*/
      getDicType({ code: "position" }).then((res) => {
        _this.Postoptions = res.data.items
      });
      /*职级*/
      getDicType({ code: "rank" }).then((res) => {
        _this.rankoptions = res.data.items
      });
    },

    /*分配组织*/
    async open() {
      let _this = this;
      _this.distribution = true;
      _this.orangeoptions = [];
      let params = {
        page: 1,
        pageSize: 10000000,
      };
      await organgequeryPage({ ...params, showEnable: 0 }).then((res) => {
        if (res.code === 1001) {
          res.data.data.forEach((res) => {
            res.keys = [];
          });
          const { data } = res.data;
          _this.orangeoptions = formatTreeData(
            data,
            "id",
            "parentId",
            "children",
            "parent_id"
          );
        }
      });
      _this.OSarr = [];
      /*岗位*/
      await queryPage({ ...params, enable: 1 }).then((res) => {
        res.data.data.forEach((res) => {
          res.keys = [];
        });
        _this.OSarr = res.data.data;
      });
      await this.$refs.orangeotree.setCheckedKeys([]);
      _this.allindex = null;
      _this.oldarr = [];
      _this.optionIds = [];
      _this.loading = false;
    },
    distribuModule(num) {
      if (this.loading) {
        this.$confirm("请先保存数据，取消后数据将会丢失?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            this.submit();
          })
          .catch(() => {
            this.distributionModule = num;
            this.sourceId1 = ''
            this.sourceId2 = ''
            this.open();
          });
      } else {
        this.distributionModule = num;
        this.sourceId1 = ''
        this.sourceId2 = ''
        this.open();
      }
    },
    /*岗位绑定组织*/
    async changaiiId(item, index) {
      if (item.keys.length == 0) {
        this.sourceId1 = item.id
        await getIdList({
          sourceId: item.id,
          type: "stations_organization",
        }).then((ress) => {
          if (ress.data) {
            item.keys = ress.data.targetIds;
            ress.data.targetIds.forEach((res) => {
              this.oldarr.push(new Binding(0, res, item.id));
            });
          } else {
            item.keys = ress.data.targetIds = [];
          }
        });
      }
      await this.$refs.orangeotree.setCheckedKeys(item.keys);
      this.allindex = index;
    },
    changeorg() {
      this.loading = true;
      this.OSarr[this.allindex].keys = this.$refs.orangeotree.getCheckedKeys();
    },
    async submit() {
      if (this.distributionModule == 0) {
        let arr = [];
        this.OSarr.forEach((res) => {
          if (res.keys.length !== 0) {
            res.keys.forEach((ress) => {
              arr.push(new Binding(1, ress, res.id));
            });
          }
        });
        let allHasData = this.oldarr.filter((item) =>
          arr.some(
            (items) =>
              item.organizationId == items.organizationId &&
              item.stationsId == items.stationsId
          )
        );
        let deleteData = this.oldarr.filter(
          (item) =>
            !allHasData.some(
              (items) =>
                item.organizationId == items.organizationId &&
                item.stationsId == items.stationsId
            )
        );
        deleteData.forEach((res) => {
          res.status = 0;
        });
        arr = [...deleteData, ...arr];
        ossaveOrUpdate(arr).then(() => {
          this.distribution = false;
        });
      } else {
        await this.getorangeoptions(this.orangeoptions);
        let allHasData = this.oldarr.filter((item) =>
          this.totalarr.some(
            (items) =>
              item.organizationId == items.organizationId &&
              item.stationsId == items.stationsId
          )
        );
        let deleteData = this.oldarr.filter(
          (item) =>
            !allHasData.some(
              (items) =>
                item.organizationId == items.organizationId &&
                item.stationsId == items.stationsId
            )
        );
        deleteData.forEach((res) => {
          res.status = 0;
        });
        this.totalarr = [...deleteData, ...this.totalarr];
        ossaveOrUpdate(this.totalarr).then(() => {
          this.distribution = false;
        });
      }
    },
    /*组织绑定岗位*/
    async changeorange(item) {
      if (item.keys.length == 0) {
        await getIdList({
          sourceId: item.id,
          type: "organization_stations",
        }).then((ress) => {
          if (ress.data) {
            item.keys = ress.data.targetIds;
            ress.data.targetIds.forEach((res) => {
              this.oldarr.push(new Binding(0, item.id, res));
            });
          } else {
            item.keys = ress.data.targetIds = [];
          }
        });
        this.optionIds = item.keys;
        this.allindex = item.id;
      } else {
        this.optionIds = item.keys;
        this.allindex = item.id;
      }
    },
    async changgeoptionIds() {
      await this.setorangeoptions(this.optionIds, this.orangeoptions);
    },
    setorangeoptions(index, arr) {
      for (let a in arr) {
        if (arr[a].id == this.allindex) {
          arr[a].keys = index;
          break;
        } else {
          if (arr[a].children) {
            this.setorangeoptions(index, arr[a].children);
          }
        }
      }
    },
    getorangeoptions(arr) {
      arr.forEach((item) => {
        if (item.keys.length !== 0) {
          item.keys.forEach((res) => {
            this.totalarr.push(new Binding(1, item.id, res));
          });
        }
        if (item.children) {
          this.getorangeoptions(item.children);
        }
      });
    },
    initDicData() {
      let data = {
        code: "organization",
      };
      getDicType(data).then((res) => {
        this.options = res.data.items;
      });
    },
    updateSortNum() {
      const sorts = []
      this.tableData.forEach((v) => {
        sorts.push({ id: v.id, sortNum: v.sortNum })
      })
      updateSortnum(sorts).then((res) => {
        if (res.code === 1001) {
          this.$message.success('更新成功')
          this.initData();
        }
      });
    },
    initData() {
      let params = {
        ...this.form,
        page: this.page,
        pageSize: this.pageSize,
      };
      queryPage(params).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalRows;
      });
    },
    resetData() {
      this.$refs.form.resetFields();
      this.initData();
    },
    resefrom() {
      this.$refs.dialogForm.resetFields();
      this.dialogVisible = false;
    },
    add() {
      this.dialogVisible = true;
      this.$data.dialogForm = this.$options.data().dialogForm;
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate();
      }, 10);
      this.dialogtitle = "添加岗位";
    },
    updateType(index) {
      const self = this;
      if (this.SelectionTableData.length == 0) {
        this.$message({
          message: '请先勾选数据',
          type: 'warning'
        });
        return
      }
      this.$confirm(
        `确定${index === 1 ? "启用" : index === 2 ? "禁用" : "删除"
        }选中的数据?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        }
      )
        .then(() => {
          switch (index) {
            case 1: {
              let params = {
                status: 1,
                type: "update_enable",
              };
              self.handleData(params);
              return;
            }
            case 2: {
              let params = {
                status: 0,
                type: "update_enable",
              };
              self.handleData(params);
              return;
            }
            case 3: {
              let params = {
                status: 0,
                type: "update_status",
              };
              self.handleData(params);
              return;
            }
            default:
              break;
          }
        })
        .catch(() => { });
    },
    handleData(data) {
      const params = {
        ...data,
        ids: this.SelectionTableData,
      };
      updateOrDelete(params).then(() => {
        this.initData();
        this.$message({
          message: "操作成功！",
          type: "success",
        });
      });
    },
    update(data) {
      /**
       * @Description: 修改岗位
       * @Param:
       * @Author: wangwangwang
       */
      this.dialogVisible = true;
      this.dialogtitle = "修改岗位";
      let str = JSON.stringify(data);
      this.dialogForm = JSON.parse(str);
      str = null;
    },
    handleSelectionChange(val) {
      const data = [];
      for (let i in val) {
        data.push(val[i].id);
      }
      this.SelectionTableData = data;
    },
    sureSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.dialogForm,
          };
          saveOrUpdate(params).then((res) => {
            if (res.code === 1001) {
              this.$message({
                message: "操作成功！",
                type: "success",
              });
              this.resefrom();
              this.initData();
            }
            this.dialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      this.options.forEach((item) => {
        if (this.dialogForm.typeId == item.id) {
          this.dialogForm.typeName = item.itemName;
          this.dialogForm.typeValue = item.itemValue;
        }
      });
    },
    sizeChange(value) {
      this.pageSize = value;
      this.initData();
    },
  },
  mounted() {
    this.initData();
    this.initDicData();
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 324;
      } else {
        num = this.screenWidth - 220;
      }
      return "width:" + num + "px;";
    },
  },
};
</script>
<style>
.is-current > .el-tree-node__content {
  color: var(--bg_color);
}
</style>
<style lang="scss" scoped>
.iconfont {
  font-size: 14px;
  padding-right: 5px;
}
.second-title-text {
  font-size: calc(#{$font_size} + 2px);
  font-weight: 400;
}
.second-title {
  padding-left: 0 !important;
  display: flex;
  .second-title-bg-none {
    background-color: #fff;
    width: 50%;
    display: flex;
    justify-content: center;
    > div {
      height: 47px;
      color: $bg_color;
      border-bottom: 2px $bg_color solid;
    }
  }
  .second-title-bg-active {
    width: 50%;
    display: flex;
    justify-content: center;
    > div {
      height: 47px;
    }
  }
}
.traaDate-info {
  min-height: 400px;
  max-height: 600px;
  overflow: auto;
}
.distribution {
  .user-active {
    color: $bg_color;
  }
  .dialoginfo-info {
    display: flex;
    padding-top: 24px;
    .dialoginfo-info-div {
      width: 496px;
      height: 517px;
      border: 1px solid #e1e5ed;
      overflow: hidden;
    }
    .dialoginfo-info-title {
      padding-left: 20px;
      height: 48px;
      background: #e1e5ed;
      font-size: calc(#{$font_size} + 2px);
      color: #4b4c4d;
      font-weight: bold;
      line-height: 48px;
    }
    .dialoginfo-info-info {
      height: calc(100% - 48px);
      overflow: auto;
      padding: 20px;
      .user {
        line-height: 24px;
        font-size: $font_size;
        color: #4b4c4d;
        font-weight: 400;
      }
      .user:hover {
        cursor: pointer;
      }
    }
    .dialoginfo-info-info::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .dialoginfo-info-info::-webkit-scrollbar-track {
      background: rgb(239, 239, 239);
      border-radius: 2px;
    }
    .dialoginfo-info-info::-webkit-scrollbar-thumb {
      background: #bfbfbf;
      border-radius: 10px;
    }
    .dialoginfo-info-info::-webkit-scrollbar-thumb:hover {
      background: #333;
    }
    .dialoginfo-info-info::-webkit-scrollbar-corner {
      background: $bg_color;
    }
    .dialoginfo-info-center {
      width: 40px;
    }
  }
  .dialoginfo-title {
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      height: 48px;
      width: 190px;
      border: 1px solid $bg_color;
      font-weight: 400;
      font-size: calc(#{$font_size} + 2px);
      @include discen;
      .iconicon_right {
        margin: 0 8px;
      }
    }
    > div:first-child {
      border-radius: 4px 0 0 4px;
    }
    > div:last-child {
      border-radius: 0 4px 4px 0;
    }
    .active {
      background: $bg_color;
      color: #ffffff;
    }
    .none {
      color: $bg_color;
      background: #ffffff;
    }
  }
}
.dictionary-container {
  .el-link {
    i {
      font-size: 14px;
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 20px;
  }
}
</style>
